<template>
    <div class="all" :style="{ height: allDom + 'px'}">
       <div class="conter">
         <div class="page-loadmore-wrapper" ref="wrapper">
           <mt-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" ref="loadmore"
                        :top-method="loadTop" @top-status-change="handleTopChange">
             <div :style="{ height: wrapperHeight + 'px'}">
               <router-link tag="div" class="Modular" v-for="(index, key) in ModularList" :key="key" to="meetingInfo">
                 <div class="Modular-name">
                   <div class="Modular-name-left">{{index.meeting}}</div>
                   <div class="Modular-name-right" v-if="!index.stater">{{index.name}}</div>
                 </div>
                 <div class="Modular-adder">{{index.mettingAddare}}</div>
                 <div class="Modular-time">时间：{{index.time}}</div>
                 <div class="Modular-stater" v-if="index.stater">审批中</div>
               </router-link>
             </div>
             <div slot="bottom" class="mint-loadmore-bottom" ref="loadmoreBottom">
               <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑上拉加载</span>
               <span v-show="bottomStatus === 'loading'"><mt-spinner type="snake"></mt-spinner></span>
             </div>
             <div slot="top" class="mint-loadmore-top">
               <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓下拉刷新</span>
               <span v-show="topStatus === 'loading'"><mt-spinner type="snake"></mt-spinner></span>
             </div>
           </mt-loadmore>
         </div>
       </div>
       <div class="foot">
         <mt-tabbar v-model="footClick" ref="footDom" fixed>
           <mt-tab-item id="日期表" @click.native="footTabClick(false)">
             日期表
           </mt-tab-item>
           <mt-tab-item id="预约会议室" @click.native="footTabClick(true)">
             预约会议室
           </mt-tab-item>
         </mt-tabbar>
       </div>
    </div>
</template>
<style lang="less" scoped>
  .conter{
    height: 100%;
    overflow-y: auto;
  }
  .Modular{
    padding: 0.5rem 1.2rem;
    line-height: 1.8;
    background-color: #fff;
    position: relative;
    margin-bottom: 0.5rem;
  }
  .Modular-name{
    display: flex;
    justify-content: space-between;
  }
  .Modular-name-left{
    font-size: 1rem;
    font-weight: 900;
  }
  .Modular-name-right{
    font-size: 0.8rem;
    color: #b5b5b5;
  }
  .Modular-stater{
    position: absolute;
    background: #64a6f2;
    color: #fff;
    height: 3rem;
    width: 3rem;
    top: 0px;
    right: 0px;
    border-bottom-left-radius: 3rem;
    text-align: center;
    font-size: 0.8rem;
    padding-top: 0.4rem;
    padding-left: 0.2rem;
  }
  .mint-tab-item{padding: 1.5rem 0;}
  .page-loadmore-wrapper{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }
  .mint-tab-item:last-child{
    background: #6DB1FF;
    color: #fff;
  }
  @component-namespace page {
  @component loadmore {
  @descendent desc {
    text-align: center;
    color: #666;
    padding-bottom: 5px;
    &:last-of-type {
      border-bottom: solid 1px #eee;
    }
  }

  @descendent listitem {
    height: 50px;
    line-height: 50px;
    border-bottom: solid 1px #eee;
    text-align: center;
    &:first-child {
      border-top: solid 1px #eee;
    }
  }

  @descendent wrapper {
    overflow: scroll;
  }

    .mint-spinner {
      display: inline-block;
      vertical-align: middle;
    }
  }
  }
  @component mint-loadmore-bottom {
    span {
      display: inline-block;
      transition: .2s linear;
      vertical-align: middle;

    @when rotate {
      transform: rotate(180deg);
    }
    }
  }
  @component-namespace page {
  @component loadmore {
  @descendent desc {
    text-align: center;
    color: #666;
    padding-bottom: 5px;
    &:last-of-type {
      border-bottom: solid 1px #eee;
    }
  }

  @descendent listitem {
    height: 50px;
    line-height: 50px;
    border-bottom: solid 1px #eee;
    text-align: center;
    &:first-child {
      border-top: solid 1px #eee;
    }
  }

  @descendent wrapper {
    margin-top: -1px;
    overflow: scroll;
  }

    .mint-spinner {
      display: inline-block;
      vertical-align: middle;
    }
  }
  }
  @component loading-background{
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    transition: .2s linear;
  }
  @component mint-loadmore-top {
    span {
      display: inline-block;
      transition: .2s linear;
      vertical-align: middle;

    @when rotate {
      transform: rotate(180deg);
    }
    }
  }
  .mint-loadmore-bottom, .mint-loadmore-top{
    display: flex;
    justify-content: center;
  }
</style>
<script>
  export default{
    data(){
      return {
        allDom: '',
        allLoaded: false,
        bottomStatus: '',
        wrapperHeight: 0,
        footClick: '',
        topStatus: '',
        allHeight: '',
        ModularList: [{
          name: '会议发起人',
          meeting: '会议名称',
          mettingAddare: '会议室名字（地址）',
          time: '2017-07-29 09:00 - 10:00',
          stater: true
        },{
          name: '会议发起人',
          meeting: '会议名称',
          mettingAddare: '会议室名字（地址）',
          time: '2017-07-29 09:00 - 10:00',
          stater: false
        }]
      }
    },
    created() {

    },
    mounted() {
      this.wrapperHeight = document.documentElement.clientHeight - (this.$refs.wrapper.getBoundingClientRect().top * 2) - this.$refs.footDom.$el.clientHeight
      console.log()
    },
    methods: {
      handleBottomChange(status) {
        this.bottomStatus = status;
      },
      handleTopChange(status) {
        this.topStatus = status;
      },
      loadBottom() {
//        setTimeout(() => {
//          let lastValue = this.ModularList.length
//          if (lastValue < 40) {
//            for (let i = 1; i <= 10; i++) {
//              this.ModularList.push(lastValue + i);
//            }
//          } else {
//            this.allLoaded = true;
//          }
//          this.$refs.loadmore.onBottomLoaded();
//        }, 1500);
      },
      loadTop() {
//        setTimeout(() => {
//          let lastValue = this.ModularList.length;
//          if (lastValue < 40) {
//            for (let i = 1; i <= 10; i++) {
//              this.ModularList.push(lastValue + i);
//            }
//          } else {
//            this.allLoaded = true;
//          }
//          this.$refs.loadmore.onBottomLoaded();
//        }, 1500);
      },
      footTabClick (val) {
        if(val){
          this.$router.push({ path: 'MakeMeeting'})
        } else {
          this.$router.push({ path: 'arrangeMeeting'})
        }
      }
    }
//    watch: {
//      'footClick': {
//        deep: true,
//        handler (newVal, oldVal) {
//          if (newVal === '预约会议室') {
//            this.router.push({ path: 'MakeMeeting'})
//          }
//        }
//      }
//    }
  }
</script>
